li {
  list-style: none;
}

// hover
.c-h {
  background: rgb(0 0 0 / 10%);
  box-shadow: 0 0 2px #646464;
  &-move {
    position: relative;
    overflow: hidden;
    &::before {
      position: absolute;
      z-index: 99;
      width: 500%;
      height: 100%;
      background: rgb(255 255 255 / 36%);
      transition: 0.5s;
      content: "";
      transform: rotate(-45deg)  translateY(-600%);
    }
    &:hover::before {
      transform: rotate(-45deg)  translateY(600%);
    }
  }
}

.c-t {
  &-main {
    color: #303133;
  }
  &-normal {
    color: #606266;
  }
  &-other {
    color: #909399;
  }

  &-1 {
    display: inline-block;
    overflow: hidden;
    width: 80%;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 1px;
  }
  &-2 {
    display: -webkit-box;
    overflow: hidden;
    width: 80%;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
  }
  &-3 {
    display: -webkit-box;
    overflow: hidden;
    width: 80%;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-wrap: break-word;
  }
  &-5 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    word-wrap: break-word;
  }
}

.c-h1 {
  margin: 6px;
  padding: 6px;
  font-size: 2.6em;
  font-weight: bold;
  color: white;
}
.c-h2 {
  margin: 6px;
  padding: 6px;
  font-size: 1.8em;
  font-weight: bold;
  color: white;
}
.c-h3 {
  margin: 6px;
  padding: 6px;
  font-size: 1.2em;
  font-weight: bold;
  color: white;
}
.c-p {
  margin: 6px;
  padding: 0 6px;
  color: white;
}

.c-container {
  width: inherit !important;
  height: inherit;
  .c-header {
    height: 50px;
  }
  .c-main {
    height: auto;
  }
}

// border
.c-border {
  border: #1f2d3d 1px solid;
  &-r {
    border: #ff2503 1px solid;
  }
  &-g {
    border: #03ff03 1px solid;
  }
  &-b {
    border: #1519ff 1px solid;
  }
}

@mixin c-size($param) {
  font-size: $param;
  line-height: $param;
}

.c-i {
  &-n {
    margin-left: 8px;

    @include c-size(20px);
  }
  &-b {
    margin-left: 12px;
    @include c-size(26px);
  }
  &-s {
    margin-left: 6px;
    @include c-size(16px);
  }
  &-bb {
    margin-left: 16px;
    @include c-size(30px);
  }
}

.c-c {
  &-w {
    color: #f9f9f9;
  }
  &-black {
    color: #1d1d1d;
  }
  &-y {
    color: #ff6039;
  }
  &-g {
    color: #3cff3b;
  }
  &-blue {
    color: #409eff;
  }
}

// background
.c-b {
  background: linear-gradient(45deg, #1eff09, #fff100, #ff0057);
  &-l1 {
    background: linear-gradient(45deg, #f3ff00, #ff044f, #e100ff);
  }
  &-l2 {
    background: linear-gradient(45deg, #1312ff, #00ff92, #3fff00);
  }
  &-t1 {
    color: rgb(0 0 0 / 39%);
  }
  &-t2 {
    color: rgb(255 255 255 / 39%);
  }
}

/**
 flex
  */
.c-f,
.c-f-jc,
.c-f-jsb,
.c-f-jsp,
.c-f-ac,
.c-f-ajc,
.c-f-colum,
.c-f-end,
.c-f-start {
  display: flex;
}
.c-f-jc,
.c-f-ajc {
  justify-content: center;
}
.c-f-jsb {
  justify-content: space-between;
}
.c-f-jsp {
  justify-content: space-around;
}
.c-f-start {
  justify-content: flex-start;
}
.c-f-end {
  justify-content: flex-end;
}
.c-f-ac {
  align-items: center;
}
.c-f-ajc {
  align-items: center;
}
.c-f-colum {
  flex-direction: column;
}
.c-f-w {
  flex-wrap: wrap;
}
